<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">


    <el-input v-model="query.name" placeholder="名称模糊查询" style="width: 200px;" clearable></el-input>
    <el-select v-model="query.state" placeholder="请选择状态" clearable>
        <el-option label="启用" value="启用"></el-option>
        <el-option label="禁用" value="禁用"></el-option>
    </el-select>
    <el-date-picker
            v-model="query.start"
            type="date"
            placeholder="选择日期1">
    </el-date-picker>-
    <el-date-picker
            v-model="query.end"
            type="date"
            placeholder="选择日期2">
    </el-date-picker>


    <el-button type="primary" @click="toAdd">添加</el-button>
    <el-button type="primary" @click="exportData">导出</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="num"
                label="顺序">
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.state=='禁用'" type="danger">{{scope.row.state}}</el-tag>
                <el-tag v-if="scope.row.state=='启用'" type="success">{{scope.row.state}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                label="创建时间">
            <template slot-scope="scope">
                {{scope.row.createTime|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>

        <el-table-column width="250"
                label="操作">
            <template slot-scope="scope">
                <el-button  size="small" @click="toEdit(scope.row)">编辑</el-button>
                <el-button type="danger"  v-if="scope.row.state=='启用'" size="small" @click="changeState(scope.row.id,'禁用')">禁用</el-button>
                <el-button type="success" v-if="scope.row.state=='禁用'"  size="small" @click="changeState(scope.row.id,'启用')">启用</el-button>
                <el-button type="danger"   size="small" @click="delOne(scope.row.id)">删除</el-button>
                <el-button type="info"   size="small" @click="goUserRole(scope.row.id)">分配用户</el-button>
            </template>
        </el-table-column>

    </el-table>


    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="顺序" :label-width="formLabelWidth">
                <el-input v-model="form.num" type="number" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addData">确 定</el-button>
        </div>
    </el-dialog>



</div>
<script>
    new Vue({
        el:"#app",
        data:{
            //这些是页面展示需要的参数
            tableData:[],
            total:0,
            query:{
                name:"",
                start:"",
                end:"",
                state:"",
                page:1,
                pageSize:2
            },
            //这些是表单需要的参数
            dialogFormVisible: false,
            form: {
                name: '',
                num:"",
            },
            formLabelWidth: '120px',
            mode:{
                title:"",
                url:""
            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            exportData(){
                location.href = "/role/exportData"
            },
            goUserRole(rid){
                // location.href = "";//在当前页面打开
                window.open("/userrole.html?rid="+rid)//新打开一个标签页
            },
            delOne(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios.post("/role/deleteOne?id="+id).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData();
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            changeState(id,state){
                let obj = {
                    id:id,
                    state:state
                }
                axios.post("/role/update",obj).then(res=>{
                    this.$message.success(state+" 成功")
                    //刷新数据
                    this.initData()
                })

            },
            addData(){
                axios.post(this.mode.url,this.form).then(res=>{
                    this.$message.success(this.mode.title+" 成功")
                    //清空表单
                    this.form = {
                        name: '',
                        num:"",
                    }
                    //隐藏弹窗
                    this.dialogFormVisible = false;
                    //刷新数据
                    this.initData()
                })

            },
            toEdit(row){
                this.form = JSON.parse(JSON.stringify(row));
                this.mode = {
                    title:"修改岗位",
                    url:"/role/update"
                }
                this.dialogFormVisible = true;
            },
            toAdd(){
                this.mode = {
                    title:"添加岗位",
                    url:"/role/add"
                }
                this.dialogFormVisible = true;
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                axios.post(`/role/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records
                    this.total = res.data.total


                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--

                    }


                })

            }

        },
        created(){
            this.initData()
        }
    })
</script>



</body>
</html>
